<template>
  <div class="detail">
    <Header :text="text"/>
    <div class="detail-content">
      <el-collapse v-model="activeNames">
        <el-collapse-item :title="$t('cExport.exportDetail')" name="1">
          <div class="thingDetail">
            <div><span class="thingText">{{$t('cExport.mainWaybillNumber')}}:</span>  {{importObj.mainWaybillNumber}}</div>
            <div><span class="thingText">{{$t('cImport.Invoice')}}:</span>  {{importObj.invoiceNo}}</div>
            <div><span class="thingText">{{$t('cImport.iStart')}}:</span>  {{importObj.originHarbor}}</div>
            <div><span class="thingText">{{$t('cExport.destinationHarbor')}}:</span>  {{importObj.destinationHarbor}}</div>
            <div><span class="thingText">{{$t('cExport.allBox')}}:</span>  {{importObj.totalBoxes}}</div>
            <div><span class="thingText">{{$t('cExport.allGross')}}:</span>  {{importObj.totalBoxWeight}}</div>
            <div><span class="thingText">{{$t('cImport.iOperation')}}:</span>  {{importObj.agentCode}}</div>
          </div>
          <!-- 货物列表详情 -->
          <div class="listDetail">
            <div class="top" @click="handleListDetail">
              <span style="font-size:5vw;font-weight: bold;">{{$t('cExport.exportList')}}</span>
              <i v-if="!listDetail" class="el-icon-arrow-down" style="font-size: 5vw;padding-left: 2.778vw"></i>
              <i v-else class="el-icon-arrow-up" style="font-size: 5vw;padding-left: 2.778vw"></i>
            </div>
            <div class="bottom" v-if="!listDetail">
              <div class="box" v-if="importObj.queryList && importObj.queryList.length !== 0">
                <div class="box-content" v-for="(item,index) in importObj.queryList" :key="index">
                  <el-row>
                    <el-col :span="12">
                      <span>
                        <span class="thingText">{{$t('cArroval.aog')}}:</span>
                        <span style="color:red" v-if="item.aog === 'AOG'">AOG</span>
                        <span v-else>{{$t('m.mNo')}}AOG</span>
                      </span>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col>
                      <span class="thingText">{{$t('cExport.shipping')}}: </span>
                      <span>{{item.waybillNumber}}</span>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <span class="thingText">{{$t('cExport.boxes')}}:</span>
                      <span>{{item.boxes}}</span>
                    </el-col>
                    <el-col :span="12" class="flexText">
                      <span class="thingText">{{$t('cImport.iWeight')}}:</span>
                      <span>{{item.grossWeight}}</span>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col>
                      <span class="thingText">{{$t('cExport.purchasingClerk')}}: </span>
                      <span>{{item.purchasingClerk}}</span>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12" class="flexText">
                      <span class="thingText">{{$t('cExport.shippedQuantity')}}:</span>
                      <span>{{item.shippedQuantity}}</span>
                    </el-col>
                    <el-col :span="12" class="flexText">
                      <span class="thingText">{{$t('cImport.iPrice')}}: </span>
                      <span>{{item.price}}</span>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <span class="thingText">{{$t('cImport.iContract')}}: </span>
                      <span>{{item.contractNo}}</span>
                    </el-col>
                    <el-col :span="12">
                      <span class="thingText">{{$t('cImport.iManufactor')}}: </span>
                      <span>{{item.factory}}</span>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12" class="flexText">
                      <span class="thingText">{{$t('cTransportSearch.partNum')}}:</span>
                      <span>{{item.partNumber}}</span>
                    </el-col>
                    <el-col :span="12" class="flexText">
                      <span class="thingText">{{$t('cTransportSearch.serialNum')}}: </span>
                      <span>{{item.serialNumber}}</span>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col>
                      <span class="thingText">{{$t('cTransportSearch.itemName')}}:</span>
                      <span>{{item.engCargoName}}</span>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12" class="flexText">
                      <span class="thingText">{{$t('cExport.currency')}}: </span>
                      <span>{{item.currency}}</span>
                    </el-col>
                    <el-col :span="12" class="flexText">
                      <span class="thingText">{{$t('cTransportSearch.packingType')}}:</span>
                      <span>{{item.packingType}}</span>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item :title="$t('cExport.waybillDetails')" name="2">
          <div class="waybill">
            <el-row>
              <el-col :span="12">
                <span class="thingText">{{$t('cExport.mainWaybillNumber')}}:  </span>
                <span>{{importObj.mainWaybillNumber}}</span>
              </el-col>
              <el-col :span="12">
                <span class="thingText">{{$t('cImport.Invoice')}}: </span>
                <span>{{importObj.invoiceNo}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <span class="thingText">{{$t('cImport.iTransFile')}}: </span>
              </el-col>
              <el-col :span="12">
                <div v-if="importObj.files && importObj.files.length !== 0">
                  <div v-for="item in importObj.files" :key="item.id"><a @click="handleDownLoad(item)">{{item.fileName}}</a></div>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <span class="thingText">{{$t('cExport.shippingDate')}}: </span>
                <span>{{importObj.shippingDate | changeDate}}</span>
              </el-col>
              <el-col :span="12">
                <span class="thingText">{{$t('cExport.originHarbor')}}: </span>
                <span>{{importObj.originHarbors}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <span class="thingText">{{$t('cExport.port')}}: </span>
                <span>{{importObj.destinationHarbors}}</span>
              </el-col>
              <el-col :span="12">
                <span class="thingText">{{$t('cExport.allGross')}}: </span>
                <span>{{importObj.grossWeight}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <span class="thingText">{{$t('cExport.boxes')}}: </span>
                <span>{{importObj.boxess}}</span>
              </el-col>
              <el-col :span="12">
                <span>
                  <span class="thingText">{{$t('cTransportSearch.size')}}:</span>
                  <span v-if="importObj.sizeParamsList && importObj.sizeParamsList.length !== 0">
                    {{importObj.sizeParamsList[0].boxLength}}* {{importObj.sizeParamsList[0].boxWidth}}* {{importObj.sizeParamsList[0].boxHeight}}
                    {{importObj.sizeParamsList[0].boxUnit}}
                  </span>
                </span>
              </el-col>
            </el-row>
          </div>
          <div v-if="importObj.trantList && importObj.trantList.length !== 0">
            <div v-for="(item,index) in importObj.trantList" :key="index" :class="['waybillBottom', clickIndex === index ? 'active': '']" @click="handleWaybill(index)"><div>
              <span>{{$t('cExport.segment')}}: {{item.departure}} ~ {{item.destination}}</span>
              <span>{{$t('cExport.transportWay')}}: {{item.transportWay}}</span>
            </div><div>
              <span>{{$t('cExport.transportTool')}}: {{item.transportTool}}</span>
            </div>
            <div><span>{{$t('cExport.flightDate')}}: {{item.flightDate}}</span></div>
            <div>
              <span>{{$t('cExport.sta')}}: {{item.sta}}</span>
            </div><div>
              <span>{{$t('cExport.std')}}: {{item.std}}</span>
            </div><div>
              <span>{{$t('cExport.eta')}}: {{item.eta}}</span>
            </div><div style="position:relative">
              <span>{{$t('cExport.etd')}}: {{item.etd}}</span>
              <div style="font-size: 6.944vw;position:absolute;bottom:5%;right:5%">
<!--                <i class="el-icon-edit" style="color: #409eff;margin-right: 10px" @click="handleEdit(item)"></i>-->
<!--                <i class="el-icon-delete" style="color: #409eff" @click="handleCancle(item)"></i>-->
              </div>
            </div></div>
          </div>
<!--          <el-button v-if="importObj.mainWaybillNumber && importObj.mainWaybillNumber !== undefined" type="primary" icon="el-icon-plus" size="mini" style="margin-bottom: 10px" @click="handleAdd">{{$t('cExport.addSegment')}}</el-button>-->
        </el-collapse-item>
        <el-collapse-item :title="$t('cExport.signDetails')" name="3">
          <div class="signDetail">
            <div>
              <span>{{$t('cImport.iStorage')}}: {{importObj.warehousingTime | changeDate}}</span>
              <span>{{$t('cImport.iReceiver')}}: {{importObj.receiver}}</span>
            </div>
            <div>
              <span>{{$t('cArroval.remark')}}: {{importObj.remark}}</span>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item :title="$t('cTransportSearch.detail')" name="4" v-if="importObj.trackingVO && importObj.trackingVO.length !== 0">
          <el-timeline>
            <el-timeline-item v-for="(activity, index) in activities" :key="index" :color="activity.color" :timestamp="activity.timestamp">
              {{$t(activity.content)}}
            </el-timeline-item>
          </el-timeline>
        </el-collapse-item>
      </el-collapse>
      <div style="display: flex;justify-content: center;align-items: center;"><el-button style="width: 50%;" @click="handleBtn">{{$t('btn.capture')}}</el-button></div>
    </div>
    <AddTransport v-if="isShow" :exportObj="importObj" :item="editItem" :record="importObj" :title="title" @handleClose="handleClose"/>
    <van-image-preview
        v-model="isShowPreview"
        :images="previewImages"
        :startPosition="index"
        :loop="true"
      >
      <template v-slot:index>长按保存</template>
    </van-image-preview>
    <component :is="modelName" :pdfSrc="pdfUrl" @handleClose="handleClose"/>
  </div>
</template>

<script>
import Header from "@/components/common/Header"
import AddTransport from '../../export/components/AddTransport'
import PDF from '@/components/common/PDF'
import { $import } from '@/api/import'
import { addTransport } from '@/utils/addTransport/addTransport.js'
import html2canvas from 'html2canvas'
import { transformArrayBufferToBase64 } from "@/assets/js/common"
import pdf from '@/utils/pdf/pdf'

export default {
  mixins: [addTransport,pdf],
  // 变量
  data() {
    return {
      modelName: '',
      text: '',
      pdfUrl: '',
      activeName: 'first',
      activeNames: ['1','2','3','4'],
      listDetail: false,
      clickIndex: -1,// 记录被点击
      data: [0,1],
      isShow: false, // 控制弹框
      editItem: {}, // 被编辑的对象
      importObj: {},
      exportObj: {},
      record: {},
      activities: [],
      previewImages: [],
      isShowPreview: false,
      imgOk: [], // 已加载的图片
      index: 0
    }
  },
  computed: {},
  // 使用其他组件
  components: {
    Header,
    AddTransport,
    PDF
  },
  // 方法
  methods: {
    handleClick() {},
    // 货物列表展开
    handleListDetail() {
      this.listDetail = !this.listDetail
    },
    // 运单被点击
    handleWaybill(index) {
      this.clickIndex = index
    },
    // 关闭弹框
    handleClose(value) {
      if (value === 1) this.handleDetail(this.record)
      this.isShow = false
      this.modelName = ''
      this.editItem = {}
    },
    // 获取详情
    async handleDetail(record) {
      const obj = {
        mainWaybillNumber: record.mainWaybillNumber,
        cargoId: record.cargoId,
        transportId: record.transportId,
        wid: record.wid,
        contractNo: record.contractNo,
        waybillNumber: record.waybillNumber
      }
      const res = await $import.getDetils(obj)
      if (res.status === 200) {
        this.importObj = res.data
        this.exportObj = res.data
        this.changeTransDetail(res.data.trackingVO[0])
      } else {
        this.$msg.fail(res.msg || '获取详情失败')
      }
    },
    // 下载文件
    handleDownLoad(item) {
      const downObj = {
        id: item.id,
        originalFileName: item.fileName
      }
      $import.downLoad(downObj)
             .then(res => {
               let _this = this
               if (res.type == 'application/json') {
                  const reader = new FileReader()
                  reader.onload = function() {
                    const { msg } = JSON.parse(reader.result) //此处的msg就是后端返回的msg内容
                    _this.$msg.fail(msg)
                  }
                  reader.readAsText(res)
                } else {
                 item.fileName.indexOf('pdf') > 0 ? this.handlePDF(res) : this.handleImg(res)
               }
             })
             .catch(err => this.$msg.fail('网络错误,请稍后再试'))
    },
    // 改造运输详情
    changeTransDetail(transObj) {
      if(transObj.shippedDateRes) {
        const arr = [
          {
            content: 'cImport.iStorageInto',
            timestamp: transObj.shippedDateRes.confirmStorageTime
          },
          {
            content: 'cImport.iClearance',
            timestamp: transObj.shippedDateRes.customsClearanceTime
          },
          {
            content: 'cImport.iArriva',
            timestamp: transObj.shippedDateRes.arrivalTime
          },
          {
            content: 'cImport.iShipment',
            timestamp: transObj.shippedDateRes.shippedTime
          },
          {
            content: 'cImport.iReceiving',
            timestamp: transObj.shippedDateRes.confirmDeliveryTime
          }
        ]
        const newArr = arr.filter(item => item.timestamp !== null)
        newArr[0].color = '#0bbd87'
        this.activities.push(...newArr)
      }
    },
    // 截图
    handleBtn() {
      this.$msg.loading()
      const a = document.querySelector('.detail-content')
      let width = a.clientWidth
      let height = a.clientHeight
      let opts = {
        width: width,
        height: height+10,
        useCORS: true,
        x: 0,
        y: 0
      }
      html2canvas(a,opts).then((canvas) => {
        var imgData = canvas.toDataURL('image/png')
        this.$msg.hideLoading()
        this.previewImages = []
        this.previewImages.push(imgData)
        this.isShowPreview = true
      })
    }
  },
  // 生命周期函数
  created() {
    document.body.scrollTop = 0
    document.documentElement.scrollTop = 0
    this.text = this.$route.query.type
    this.phone = localStorage.getItem('system')
  },
  mounted() {
    this.record = JSON.parse(this.$route.query.record)
    this.handleDetail(this.record)
  }
}
</script>

<style scoped>
.detail {
  background-color:white;
}
.detail-content {
  position: relative;
  top: 18.333vw;
  left: 0;
  padding: 0 10px;
}
/deep/.van-popup--left {
  left: 0
}
/deep/#tab-second {
  padding: 0 11.111vw;
}
/deep/#tab-first {
  padding: 0 11.111vw;
}
/deep/.el-collapse {
  border-top: 0;
}
.first {
  padding: 0 2.778vw;
}
/deep/.el-collapse-item__header {
  font-size: 5vw !important;
}
/deep/.el-tabs__header {
  position: fixed;
  top: 19.333vw;
  z-index: 99;
  width: 100%;
  background-color: white;
}
/deep/.el-collapse-item__header {
  font-weight: bold;
}
/deep/.el-collapse-item__content {
  font-size: 3.889vw !important;
  padding-bottom: 0;
}
/* 货物详情 */
.thingText {
  font-weight: bold;
}
.listDetail .top {
  margin: 2.778vw 0;
}
.box {
  padding: 0 2.778vw;
  border: 1px solid #797979;
  border-radius: 5px;
}
.box-content {
  padding: 2.778vw 0;
  border-bottom: 0.278vw dashed #797979;
}
.box-content:last-child {
  border-bottom: 0;
}
.box-content-text {
  display: flex;
}
.box-content-text span {
  flex: 1;
}
/* 运单详情 */
.waybill div {
  display: flex;
}
.waybill div span {
  flex: 1;
}
.waybill .waybill-one span:first-child{
  max-width: 27%;
}
.waybill .waybill-one span:last-child{
  max-width: 70%;
  font-size: 13px;
}
.waybillBottom div {
  display: flex;
}
.waybillBottom div span {
  flex: 1;
}
.waybillBottom {
  padding: 10px 0;
  border-top: 1px dashed #797979;
}
.active {
  background-color: rgba(172, 169, 169, 0.1);
}
.signDetail div {
  display: flex;
}
.signDetail div span {
  flex: 1;
}
/* 签收详情 */
/deep/.el-timeline {
  padding-left: 15px;
}
.flexText {
  display: flex;
}
.flexText span:last-child {
  flex: 1;
}
</style>
